 <template>
	<div class="main">
	 	<navTop></navTop>
	 	<div class="breadBox">
	 		<el-breadcrumb separator="/">
	 		  <el-breadcrumb-item :to="{ path: '/examindex' }">考试管理</el-breadcrumb-item>
	 		  <el-breadcrumb-item :to="{ path: '/scorerelease' }">成绩管理 </el-breadcrumb-item>
			  <el-breadcrumb-item>修改成绩管理 </el-breadcrumb-item>
	 		</el-breadcrumb>
	 	</div>
	 	<div class="contentMain">
			<ul>
				<li>
					<span>选择查看班级：</span>
					<el-select v-model="classid" placeholder="请选择" @change="classchange" clearable>
					    <el-option
					      v-for="item in classlist"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					</el-select>
				</li>
				<li>
					<span>查找准考证号：</span>
					<el-input clear v-model="scorelistobj.query.examNumber" @change="examnumberTab" clearable></el-input>
				</li>
				<li>
					<span>查找姓名：</span>
					<el-input clear v-model="scorelistobj.query.studentName" @change="studentNameTab" clearable></el-input>
				</li>
			</ul>
			<div class="tablebox" v-if="studentlist.length > 0">
				<el-table
					class="custom-table"
				    ref="multipleTable"
				    :data="studentlist"
				    tooltip-effect="dark"
				    style="width: 100%"
					:height="tableHeight"
				    @selection-change="handleSelectionChange"
					stripe
					:header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
					<el-table-column
					  type="selection"
					  width="55">
					</el-table-column>
				    <el-table-column
				      label="准考证号"
					    width="120">
				      <template slot-scope="scope">{{ scope.row.examNumber }}</template>
				    </el-table-column>
				    <el-table-column
				      label="姓名">
					  <template slot-scope="scope">{{ scope.row.name?scope.row.name:'--' }}</template>
				    </el-table-column>
				    <el-table-column
				      label="班级">
					  <template slot-scope="scope">{{ scope.row.className?scope.row.className:'--' }}</template>
				    </el-table-column>
					<el-table-column
					  label="总分">
					  <template slot-scope="scope">
						  {{scope.row.totalScore?scope.row.totalScore:'--'}}
					  </template>
					</el-table-column>
					<el-table-column
					  label="客观题">
					  <template slot-scope="scope">{{ scope.row.objectiveTotalScore?scope.row.objectiveTotalScore:'--' }}</template>
					</el-table-column>
					<el-table-column
					  label="主观题">
					  <template slot-scope="scope">{{ scope.row.subjectivityTotalScore?scope.row.subjectivityTotalScore:'--' }}</template>
					</el-table-column>
					<el-table-column
						v-for="(question, index) in studentlist[0].smallQuestions"
						:key="question.questionNumber"
						:label="question.name+question.questionNumber"
						width="150">
						<template slot-scope="scope">
						  {{ scope.row.smallQuestions[index].score }}
						</template>
					 </el-table-column>
					<el-table-column
						fixed="right"
						label="操作"
						align="center"
						width="200">
						<template slot-scope="scope">
							<div style="display: flex;">
								<el-button @click="lookcard(scope.row)" type="text" size="small" style="display: flex;align-items: center;"><img src="../../assets/image/school/pj.png" style="width:12px;margin-right:5px;" />答题卡</el-button>
								<el-button @click="editscoresingle(scope.row)" type="text" size="small" style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png" style="width:12px;margin-right:5px;" />编辑</el-button>
								<!-- <el-button @click="handleClick(scope.row)" type="text" size="small" style="display: flex;align-items: center;color:#EC555A"><img src="../../assets/image/school/qk.png" style="width:12px;margin-right:5px;" />缺考</el-button> -->
								<el-button @click="deletescore(scope.row.id)" type="text" size="small" style="display: flex;align-items: center;color:#EC555A"><img src="../../assets/image/school/del.png" style="width:12px;margin-right:5px;" />删除</el-button>
							</div>
						</template>
					</el-table-column>
				  </el-table>
			</div>
			<empty v-else></empty>
		</div>
		<div class="examfooter">
			<div class="examFootercontent">
				<div class="totaldata">
					<span>已选<i>{{multipleSelection.length}}</i>项 / 共{{total}}项</span>
					<em @click="blfsscore">补录分数</em>
					<!-- <em>批量补录</em> -->
					<em @click="pleditscore">批量修改</em>
					<em @click="deletebatchscore">批量删除</em>
				</div>
				<div>
					<el-pagination
						background
					      @current-change="handleCurrentChange"
						  :page-sizes="[20, 50, 100]"
						  @size-change="handleSizeChange"
						  :page-size="scorelistobj.pageSize"
						  layout="sizes, prev, pager, next"
					      :total="total">
					</el-pagination>
					<!-- <el-pagination
						background
					      @current-change="handleCurrentChange"
					      layout="prev, pager, next, jumper"
						  :page-size="scorelistobj.pageSize"
					      :total="total">
					    </el-pagination> -->
				</div>
			</div>
		</div>
		<!-- 补录分数 -->
		<div class="addExamMain" v-if="editscoreIshow">
			<div class="addExamContent">
				<h3>补录分数</h3>
				<ul>
					<li>
						<span>准考证号：</span>
						<div class="inputBox">
							<el-input v-model="exitStudent.examnumber" placeholder="请输入内容"></el-input>
						</div>
					</li>
					<li>
						<span>学生姓名：</span>
						<div class="inputBox">
							<el-input v-model="exitStudent.name" placeholder="请输入内容"></el-input>
						</div>
					</li>
					<li>
						<span>学生班级：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.xb" placeholder="请选择">
							  <el-option
								v-for="item in classlist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li v-for="item in questionlist">
						<span>{{ item.name }}{{item.questionNumber}}：</span>
						<div class="inputBox">
							<el-input v-model="item.score" placeholder="请输入内容"></el-input>
						</div>
					</li>
					<!-- <li style="color:red;" v-if="attentionIshow">
						<span></span>
						<i class="el-icon-warning-outline" style="margin-right:5px;"></i>{{attention}}
					</li> -->
				</ul>
				<div class="groupbutton">
					<el-button type="primary" @click="editscorejx">保存并继续</el-button>
					<el-button type="primary" @click="editscoresure">确定</el-button>
					<el-button type="primary" @click="editscoregoback">返回</el-button>
				</div>
			</div>
		</div>
		<!-- 单个小题修改 -->
		<div class="addExamMain" v-if="singlequestionishow">
			<div class="addExamContent">
				<h3>单个修改小题分</h3>
					<div class="singlecontent"><span>准考证号：{{editcon.examNumber}}</span><span>考生姓名：{{editcon.name}}</span><span>考生班级：{{editcon.className}}</span></div>
				<!-- <div v-for="(month, index) in editcon.smallQuestions" :key="index" class="checkbox-group"> -->
				    <!-- <el-checkbox :indeterminate="isIndeterminate(month)" v-model="month.checkedAll" @change="handleCheckAllChange(month, $event)">{{month.name}}</el-checkbox> -->
				   <div class="checkboxcontent">
					   <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
					   <el-checkbox-group v-model="selectchecked" class="horizontal-checkbox-group">
					     <el-checkbox
					       v-for="option in editcon.smallQuestions"
					       :key="option.id"
					       :label="option.id">
					       {{ option.name }}{{option.questionNumber}}
					     </el-checkbox>
					   </el-checkbox-group>
				   </div>
				  <!-- </div> -->
				  <div class="czdfSet">
					  操作得分：
					  <el-select v-model="singleobj.operator" clearable placeholder="请选择">
					      <el-option
					        v-for="item in operatorlist"
					        :key="item.id"
					        :label="item.name"
					        :value="item.id">
					      </el-option>
					    </el-select>
					  <el-input clear v-model="singleobj.score"></el-input>
					  <span>
						  <el-checkbox v-model="singleobj.isRounding"></el-checkbox>
						  使用整分(1/0.5)
					  </span>
				  </div>
				  <div class="groupbutton">
				  	<el-button type="primary" @click="singleeditscorejx">保存并继续</el-button>
				  	<el-button type="primary" @click="singleeditscoresure">确定</el-button>
				  	<el-button type="primary" @click="singleeditscoregoback">返回</el-button>
				  </div>
			</div>
		</div>
			<!-- 批量修改小题分 -->
			<div class="addExamMain" v-if="plquestionishow">
				<div class="addExamContent">
					<h3>批量修改小题分</h3>
					<el-radio v-model="plxiuradio" label="1">指定范围修改</el-radio>
					<el-radio v-model="plxiuradio" label="2">固定范围修改</el-radio>
					<div class="czdfContent" style="padding-top:14px;" v-if="plxiuradio==1">
						<span>准考证号：</span>
						<el-input v-model="batchModife.examNumber"></el-input>
					</div>
					<!-- <div class="czdfContent" v-if="plxiuradio==2">
						<span>修改范围：</span>
						<el-select v-model="gradeId" placeholder="请选择" clearable @change="xbchange">
						  <el-option
							v-for="item in gradelist"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						  </el-option>
						</el-select>
					</div> -->
					<div class="czdfContent" style="padding-top:14px;"  v-if="plxiuradio==2">
						<span>修改班级：</span>
						<el-select v-model="classIdlist" multiple placeholder="请选择" clearable>
						    <el-option
						      v-for="item in classlist"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						  </el-select>
					</div>
					<div class="checkbox-group" style="padding-top:14px;">
					    <el-checkbox :indeterminate1="isIndeterminate1" v-model="examcheckAll" @change="handleCheckAllChange1">全选</el-checkbox>
					    <el-checkbox-group v-model="smallselectAll" class="horizontal-checkbox-group">
					      <el-checkbox
					        v-for="option in studentlist[0].smallQuestions"
					        :key="option.id"
					        :label="option.id">
					        {{ option.name }}{{option.questionNumber}}
					      </el-checkbox>
					    </el-checkbox-group>
					</div>
					<div class="czdfSet">
						  操作得分：
						  <el-select v-model="batchModife.operator" clearable placeholder="请选择">
						      <el-option
						        v-for="item in operatorlist"
						        :key="item.id"
						        :label="item.name"
						        :value="item.id">
						      </el-option>
						    </el-select>
						  <el-input clearable v-model="batchModife.score"></el-input>
						  <span>
							  <el-checkbox v-model="batchModife.isRounding"></el-checkbox>
							  使用整分(1/0.5)
						  </span>
					</div>
					<div class="groupbutton">
						<el-button type="primary" @click="pleditscorejx">保存并继续</el-button>
						<el-button type="primary" @click="pleditscoresure">确定</el-button>
						<el-button type="primary" @click="pleditscoregoback">返回</el-button>
					</div>
				</div>
			</div>
			<!-- 答题卡 -->
		<div class="missanexam" v-if="cardexamIshow">
			<h3><i class="el-icon-warning-outline"></i>请选择查看答题卡科目</h3>
			<el-radio-group v-model="cardradio">
			    <el-radio v-for="item in xuekelist" :label="item.id" :key="item.id" >{{item.name}}</el-radio>
			</el-radio-group>
		  <div class="boxbutton">
			  <el-button type="primary" @click="cardlooksure">确定</el-button>
			  <el-button type="info" @click="cardexamIshow=false">取消</el-button> 
		  </div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	import empty from "../../components/school/empty.vue"
	import {get,post,del,put} from '../../request/api.js'
	export default{
		data(){
			return{
				studentlist:[],
				exitStudent:{
					  id:'',
					  name:'',
					  xh:'',
					  examnumber:'',
					  xb:'',
					  grade:'',
					  class:'',
					  xk:'',
					  smallyz:''
				},
				months: [
				        {
				          name: '全选',
				          options: [{ value: '1班', label: '1班' }, { value: '1班', label: '1班' },{ value: '1班', label: '1班' }, { value: '1班', label: '1班' },{ value: '1班', label: '1班' }, { value: '1班', label: '1班' },{ value: '1班', label: '1班' }, { value: '1班', label: '1班' },{ value: '1班', label: '1班' }, { value: '1班', label: '1班' },{ value: '1班', label: '1班' }, { value: '1班', label: '1班' },],
				          selected: [],
				          checkedAll: false
				        }
				        // 其他月份数据...
				      ],
				editscoreIshow:false,
				singlequestionishow:false,
				plquestionishow:false,
				plxiuradio:'1',
				scorelistobj:{
					page:1,
					pageSize:20,
					query: {
						examCourseId: 0,
						classId: 0,
						studentName: "",
						examNumber: ""
					}
				},
				total:0,
				classlist:[],
				classid:null,
				multipleSelection:[],
				tableHeight:'',
				checkAll: false, // 全选状态
				isIndeterminate: false, // 半选状态
				selectchecked: [], // 当前选中的复选框的值
				operatorlist:[
					{
						name:'+',
						id:1
					},
					{
						name:'-',
						id:2
					},
					{
						name:'*',
						id:3
					},
					{
						name:'/',
						id:4
					}
				],
				singleobj:{
					examCourseId:0,
					studentId:0,
					questionIds:[],
					score:'',
					operator:'',
					isRounding:false
				},
				batchModife:{
					examCourseId:0,
					examNumber:'',
					questionIds:[],
					score:'',
					operator:'',
					isRounding:false
				},
				examcheckAll: false, // 全选状态
				isIndeterminate1: false, // 半选状态
				smallselectAll:[],
				gradelist:[],
				classlist:[],
				gradeId:'',
				classIdlist:[],
				cardexamIshow:false,
				xuekelist:[],
				cardradio:'',
			}
		},
		mounted() {
			this.examobjcontent = JSON.parse(sessionStorage.getItem('examContent'))
			this.getstudentlist(this.$route.query.examid)
			this.classconent()
			this.tableHeight = parseInt( document.documentElement.clientHeight-260)
			//获取年级列表
			this.gradelisttab()
		},
		watch: {
		    selectchecked(value) {
		      // 根据选中的复选框更新全选状态和半选状态
		      const allIds = this.editcon.smallQuestions.map((item) => item.id);
		      this.checkAll = value.length === allIds.length;
		      this.isIndeterminate = value.length > 0 && value.length < allIds.length;
		    },
			smallselectAll(value){
				// 根据选中的复选框更新全选状态和半选状态
				const allIds = this.studentlist[0].smallQuestions.map((item) => item.id);
				this.examcheckAll = value.length === allIds.length;
				this.isIndeterminate1 = value.length > 0 && value.length < allIds.length;
			}
		},
		methods:{
			handleSelectionChange(val){
				 this.multipleSelection = val;
			},
			// 处理每页条数变化
			handleSizeChange(val){
				this.scorelistobj.pageSize = val
				this.getstudentlist(this.$route.query.examid)
			},
			handleCurrentChange(val){
				this.scorelistobj.page = val
				this.getstudentlist(this.$route.query.examid)
			},
			examnumberTab(){
				this.getstudentlist(this.$route.query.examid)
			},
			studentNameTab(){
				this.getstudentlist(this.$route.query.examid)
			},
			classchange(val){
				this.classid = val
				this.scorelistobj.query.classId=val?val:0
				this.getstudentlist(this.$route.query.examid)
			},
			// 获取班级
			classconent(){
				get('/exampaper/classlist',{examId:this.examobjcontent.id})
				.then(res=>{
					if(res.code==200){
						this.classlist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					his.$message.error(error.message);
				})
			},
			// 获取学生成绩列表
			getstudentlist(id){
				this.studentlist=[]
				this.scorelistobj.query.examCourseId=id
				post('/score/scoredetails',this.scorelistobj)
				.then(res=>{
					// //console.info(res)
					if(res.code==200){
						this.studentlist = res.data.items
						this.questionlist = res.data.items[0].smallQuestions.map(item => {
							  item.score = 0; // 添加新属性 score 并设置为 0
							  return item; // 返回修改后的对象
						});
						this.total = res.data.total
					}else{
						this.$message.error(res.message);
					}
				})
				// .catch(error=>{
				// 	this.$message.error(error.message);
				// })
			},
			// 补录分数内容
			supplementscore(){
				let scorelistid = []
				scorelistid = this.questionlist
				  .filter(item => item.score !== 0) // 过滤出 score 不为 0 的项
				  .map(item => ({
				    questionId: item.id, // 提取 id 并重命名为 questionId
				    score: item.score // 提取 score
				  }));
				  // //console.info(scorelistid)
				  // return false
				  let obj={
					examCourseId:this.$route.query.examid,
					examNumber:this.exitStudent.examnumber,
					// name:this.exitStudent.name,
					// classId:this.exitStudent.xb,
					questionScores:scorelistid,
				  }
				//console.info(obj)
				 // return false
				post('/score/addscore',obj)
				.then(res=>{
					if(res.code==200){
						this.editscoreIshow = false
						this.getstudentlist(this.$route.query.examid)
					}else{
						this.$message.error(res.message)
					}
				})
			},
			// 补录分数
			editscorejx(){
				// this.editscoreIshow = false
				this.supplementscore()
			},
			editscoresure(){
				this.editscoreIshow = false
				this.supplementscore()
			},
			editscoregoback(){
				this.editscoreIshow = false
			},
			blfsscore(){
				this.editscoreIshow = true
			},
			//单个学生分数修改
			singlescore(){
				this.singleobj.examCourseId = this.$route.query.examid
				this.singleobj.studentId = this.editcon.id
				this.singleobj.questionIds = this.selectchecked
				//console.info(this.singleobj)
				post('/score/updatescore',this.singleobj)
				.then(res=>{
					if(res.code==200){
						this.$message.success(res.message)
						this.getstudentlist(this.$route.query.examid)
						this.singlequestionishow = false
						this.singleobj={
							examCourseId:0,
							studentId:0,
							questionIds:[],
							score:'',
							operator:'',
							isRounding:false
						}
						this.selectchecked = []
					}else{
						this.$message.error(res.message)
					}
				})
				// post('/score/updatescore')
			},
			//保存继续
			singleeditscorejx(){
				this.singlescore()
				// //console.info(this.selectchecked)
			},
			//保存
			singleeditscoresure(){
				// this.singlequestionishow = false
				this.singlescore()
			},
			//取消
			singleeditscoregoback(){
				this.singlequestionishow = false
				this.singleobj={
					examCourseId:0,
					studentId:0,
					questionIds:[],
					score:'',
					operator:'',
					isRounding:false
				}
				this.selectchecked = []
			},
			editscoresingle(con){
				//console.info(con)
				this.editcon = con
				this.singlequestionishow = true
			},
			//单个学生分数修改
			batchscore(){
				this.batchModife.examCourseId = this.$route.query.examid
				this.batchModife.questionIds = this.smallselectAll
				//console.info(this.singleobj)
				post('/score/batchscore',this.batchModife)
				.then(res=>{
					if(res.code==200){
						this.$message.success(res.message)
						this.getstudentlist(this.$route.query.examid)
						this.plquestionishow = false
						this.batchModife={
							examCourseId:0,
							examNumber:'',
							questionIds:[],
							score:'',
							operator:'',
							isRounding:false
						}
						this.smallselectAll = []
					}else{
						this.$message.error(res.message)
					}
				})
				// post('/score/updatescore')
			},
			// 批量班级学生分数修改
			batchclassscorebox(){
				this.batchModife.examCourseId = this.$route.query.examid
				this.batchModife.questionIds = this.smallselectAll
				this.batchModife.classIds = this.classIdlist
				post('/score/batchclassscore',this.batchModife)
				.then(res=>{
					if(res.code==200){
						this.$message.success(res.message)
						this.getstudentlist(this.$route.query.examid)
						this.plquestionishow = false
						this.batchModife={
							examCourseId:0,
							examNumber:'',
							questionIds:[],
							score:'',
							operator:'',
							isRounding:false
						}
						this.smallselectAll = []
						this.plquestionishow = false
					}else{
						this.$message.error(res.message)
					}
				})
				// //console.info(this.classIdlist)
				// //console.info(this.batchModife)
			},
			// 批量修改
			pleditscorejx(){
				//console.info('this.plxiuradio',this.plxiuradio)
				if(this.plxiuradio==1){
					this.batchscore()
				}else{
					this.batchclassscorebox()
				}
			},
			pleditscoresure(){
				//console.info('this.plxiuradio',this.plxiuradio)
				if(this.plxiuradio==1){
					this.batchscore()
				}else{
					this.batchclassscorebox()
				}
			},
			pleditscoregoback(){
				this.batchscore()
				this.batchModife={
					examCourseId:0,
					examNumber:'',
					questionIds:[],
					score:'',
					operator:'',
					isRounding:false
				}
				this.smallselectAll = []
				this.plquestionishow = false
			},
			pleditscore(){
				this.plquestionishow = true
			},
			handleCheckAllChange(value) {
			  // 全选状态改变时，更新 selectchecked 的值
			  const allIds = this.editcon.smallQuestions.map((item) => item.id);
			  this.selectchecked = value ? allIds : [];
			  this.isIndeterminate = false;
			},
			handleCheckAllChange1(value) {
			  // 全选状态改变时，更新 selectchecked 的值
			  const allIds = this.studentlist[0].smallQuestions.map((item) => item.id);
			  this.smallselectAll = value ? allIds : [];
			  this.isIndeterminate1 = false;
			},
			//获取年纪列表
			gradelisttab(){
				get('/grade/list')
				.then(res=>{
					if(res.code==200){
						this.gradelist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
			},
			xbchange(val){
				if(val){
					get('/grade/classlist',{gradeId:val})
					.then(res=>{
						if(res.code==200){
							this.classlist = res.data
						}else{
							this.$message.error(res.message);
						}
					})
					.catch(error=>{
						this.$message.error(error.message);
					})
				}else{
					get('/classes/list')
					.then(res=>{
						if(res.code==200){
							this.classlist = res.data
						}else{
							this.$message.error(res.message);
						}
					})
					.catch(error=>{
						this.$message.error(error.message);
					})
				}
			},
			lookcard(con){
				// //console.info(con.paperImages)
				let photo = con.paperImages.filter(item=>item.filePath).map(item => item.filePath)
				//console.info('photo',photo)
				const $viewer = this.$viewerApi({
					images: photo
				})
			},
			//删除成绩
			deletescore(id){
				let obj={
					examCourseId:this.$route.query.examid,
					studentIds:[id]
				}
				 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							post('/score/deletescore',obj)
							.then(res=>{
								if(res.code==200){
									this.$message({
									  type: 'success',
									  message: '删除成功!'
									});
									this.getstudentlist(this.$route.query.examid)
								}else{
									this.$message({
									  type: 'error',
									  message: res.message
									});
								}
							})
							.catch(error=>{
								this.$message({
								  type: 'error',
								  message: error.message
								});
							})
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				        });          
				})
			},
			//批量删除成绩
			// 批量删除学生
			deletebatchscore(){
				if(this.multipleSelection.length>0){
					let obj={
						examCourseId:this.$route.query.examid,
						studentIds:this.multipleSelection.map(item=>item.id)
					}
					 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					          confirmButtonText: '确定',
					          cancelButtonText: '取消',
					          type: 'warning'
					        }).then(() => {
								post('/score/deletescore',obj)
								.then(res=>{
									if(res.code==200){
										this.$message({
										  type: 'success',
										  message: '删除成功!'
										});
										this.getstudentlist(this.$route.query.examid)
									}else{
										this.$message({
										  type: 'error',
										  message: res.message
										});
									}
								})
								.catch(error=>{
									this.$message({
									  type: 'error',
									  message: error.message
									});
								})
					        }).catch(() => {
					          this.$message({
					            type: 'info',
					            message: '已取消删除'
					        });          
					})
				}else{
					this.$message({
					  type: 'warning',
					  message:'请先选择要删除的内容'
					});
				}
			}
		},
		components:{navTop,empty}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding:24px;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
	}
	.contentMain ul{
		display: flex;
		align-items: center;
		justify-content: left;
		width:100%;
	}
	.contentMain ul li{
		display: flex;
		align-items: center;
		justify-content: left;
		font-size:14px;
		color:#557292;
		margin-right:14px;
	}
	.contentMain ul li >>> .el-input{
		width:124px;
	}
	.contentMain ul li >>> .el-input__inner{
		width: 124px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.contentMain ul li >>> .el-input__icon{
		line-height:34px;
	}
	.examfooter{
		width:100%;
		height:54px;
		background: rgba(255,255,255,0.6);
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		position:fixed;
		left:0;
		bottom:0;
		z-index:100
	}
	.examFootercontent{
		width:auto;padding:0 40px;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
		color:#557292;
		display: flex;
		justify-content: left;
		align-items: center;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
	.examFootercontent .totaldata em{
		font-style:normal;
		width: 96px;
		height: 34px;
		border-radius: 10px;
		line-height:34px;
		background: #295CFF;
		text-align: center;
		color:#fff;
		margin-left:14px;
		cursor: pointer;
	}
	.examFootercontent .totaldata em:last-child{
		background:#EC555A;
	}
	.examFootercontent .totaldata >>> .el-pager li.active{
		background-color:#295CFF
	}
	.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row th{
		font-size:14px;
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	  font-size:14px;
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
	.examFootercontent >>> .el-pagination__jump{
		margin-left:5px;
	}
	.examFootercontent >>> .el-pager{
		margin-top:2px;
	}
	.examFootercontent >>> .el-pager li{
		margin:0 3px;
		min-width:25px;
		height: 25px;
		line-height: 25px
	}
	.examFootercontent >>> .el-pagination button{
		margin-top:2px;
	}
	.breadBox{
		height:32px;
		background: #F4F7FD;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.tablebox{
		margin-top:14px;
		height:calc(100vh - 260px);
	}
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
		max-height:600px;
	}
	.checkboxcontent{
		height:200px;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
		justify-content: left;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.addExamContent ul{
		height:350px;
		overflow-y:auto;
		overflow-x: hidden;
	}
	.addExamContent ul::-webkit-scrollbar {
		 width:4px;
		background-color: #eee;
		border-radius:10px;
	}
	.addExamContent ul::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.addExamContent ul::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:80px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-input__icon{
		line-height:34px;
	}
	.inputBox{
		width: 400px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:34px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:14px;
	}
	.bcontentcolor{
		font-size:14px;
		color:#295CFF;
		display: inline-block;
		margin-left:20px;
		cursor: pointer;
	}
	.infosetcontentfont{
		color:#5B6371
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#295CFF;
		padding:0 4px;
	}
	.addExamContent >>> .el-upload-dragger{
		width:522px;
	}
	.checkbox-group{
		font-size:14px;
		color:#5B6371;
		margin-bottom:20px;
		height:200px;
		overflow-x:hidden;
		overflow-y: auto;
	}
	.el-checkbox{
		margin-bottom:12px;
	}
	.czdfSet{
		display: flex;
		justify-content: left;
		align-items: center;
		font-size:14px;
		color:#557292;
	}
	.czdfSet >>> .el-input{
		width: 100px;
		height: 34px;
		border-radius: 10px;
		margin-right:10px;
	}
	.czdfSet >>> .el-input__inner{
		width: 100px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.czdfSet >>> .el-input__icon{
		line-height:34px;
	}
	.czdfSet span{
		display: inline-block;
		color:#5B6371;
		margin-top:9px;
	}
	.czdfSet span .el-checkbox{
		margin-left:5px;
	}
	.czdfContent{
		display: flex;
		justify-content: left;
		align-items: center;
		
	}
	.czdfContent span{
		font-size:14px;
		color:#557292;
		width:80px;
	}
	.czdfContent >>> .el-input{
		width: 436px;
	}
	.czdfContent >>> .el-input__inner{
		width: 436px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.czdfContent >>> .el-input__icon{
		line-height:34px;
	}
	.czdfContent >>> .el-textarea{
		width: 436px;
	}
	.czdfContent >>> .el-textarea__inner{
		width: 436px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.contentMain >>> .el-table__body-wrapper::-webkit-scrollbar {
	 width:4px !important;
		background-color: #eee;
		border-radius:10px;
	}
	/* 针对 Webkit 内核浏览器（如 Chrome, Safari） */
	.el-table__body::-webkit-scrollbar {
	  width: 4px; /* 滚动条宽度 */
	  height: 4px; /* 滚动条高度 */
	}
	
	.el-table__body::-webkit-scrollbar-thumb {
	  background: #b0b0b0; /* 滚动条颜色 */
	  border-radius: 3px;
	}
	
	.el-table__body::-webkit-scrollbar-track {
	  background: #e0e0e0; /* 滚动条轨道颜色 */
	  border-radius: 3px;
	}
	
	/* 针对 Firefox */
	.el-table__body {
	  scrollbar-width: thin; /* 滚动条宽度 */
	  scrollbar-color: #b0b0b0 #e0e0e0; /* 滚动条颜色和轨道颜色 */
	}
	.contentMain >>> .el-table--scrollable-y::-webkit-scrollbar {
		width:4px !important;
		height:4px !important;
		background-color: #eee;
		border-radius:10px;
	}
	.contentMain >>> .el-table__body-wrapper::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.contentMain >>> .el-table--scrollable-y::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.contentMain >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.contentMain >>> .el-table--scrollable-y::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.contentMain >>> .el-table__fixed-right-patch{
		width:0 !important
	}
	.contentMain >>> .el-table__fixed-right{
		right:4px !important
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
	.singlecontent{
		display: flex;
		align-items: center;
		font-size:14px;
		padding-bottom:15px;
	}
	.singlecontent span{
		display: inline-block;
		padding-right:20px;
		color:#606266;
	}
	.missanexam{
	  	width: 634px;
	  	height: 272px;
	  	border-radius: 4px;
	  	background:#fff;
	  	position:fixed;
	  	left:50%;
	  	top:50%;
	  	transform: translate(-50%,-50%);
	  	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
	  	z-index:1100;
	  	box-sizing: border-box;
	  	padding:0 30px;
	  }
	  .missanexam h3{
	  	text-align: center;
	  	padding:24px 0;
	  	font-size:14px;
	  	font-weight: normal;
	  }
	  .missanexam h3 i{
	  	font-style:normal;
	  	color:rgb(255, 125, 0);
	  	font-size:16px;
	  	display: inline-block;
	  	padding-right:6px;
	  }
	  .missanexam p{
	  	text-align: center;
	  	font-size:14px;
	  	padding-bottom:24px;
	  }
	  .missanexam >>> .el-radio{
	  	margin-top:30px;
	  }
	  .emptyBox{
	  	position:relative;
		padding-top:100px;
	  }
	  boxbutton{
		display: flex;
		justify-content: center;
		padding-top:24px;
	}
	.boxbutton >>> .el-button:last-child{
		margin-left:30px;
	}
</style>